<!-- 折线图 -->
<template>
  <div class="eBox">
    <div v-show="!isEmpty" ref="echarts" class="echarts" />
    <el-empty v-if="isEmpty" :image="require('@/assets/icon/empty.svg')" description="暂无数据" />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps({
  config:{ type: Object, default: () => ({}) }
})
const isEmpty = ref(false)
const option = reactive({
        color: ['#0D9AFF'],
        grid: {
          left: '30',
          right: '40',
          bottom: '60',
          top: '50',
          containLabel: true
        },
        tooltip: {
          show: true, // 是否显示
          trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          backgroundColor: 'rgba(255, 255, 255, 0.95)', // 提示框浮层的背景颜色。
          borderColor: '#333', // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: { // 提示框浮层的文本样式。
            color: '#595959',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14
          },
          extraCssText: 'box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);', // 额外附加到浮层的 css 样式
          confine: false // 是否将 tooltip 框限制在图表的区域内。
          // formatter: '{b} 的成绩是 {c}'
          // formatter: function(arg) {
          //   return arg[0].name + '<br/>数值:' + arg[0].data
          // }
        },
        xAxis: {
          data: [],
          axisLabel: {
            color: '#595959'
          }
        },
        yAxis: {
          boundaryGap: false,
          type: 'value'
        },
        series: [
          { data: [] }
        ]
      })


</script>
<script>
export default {
  props: {
    config: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      isEmpty: false,
      option: {
        color: ['#0D9AFF'],
        grid: {
          left: '30',
          right: '40',
          bottom: '60',
          top: '50',
          containLabel: true
        },
        tooltip: {
          show: true, // 是否显示
          trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          // showContent: true, //是否显示提示框浮层，默认显示。
          // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
          // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
          backgroundColor: 'rgba(255, 255, 255, 0.95)', // 提示框浮层的背景颜色。
          borderColor: '#333', // 提示框浮层的边框颜色。
          borderWidth: 0, // 提示框浮层的边框宽。
          padding: 5, // 提示框浮层内边距，
          textStyle: { // 提示框浮层的文本样式。
            color: '#595959',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 14
          },
          extraCssText: 'box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);', // 额外附加到浮层的 css 样式
          confine: false // 是否将 tooltip 框限制在图表的区域内。
          // formatter: '{b} 的成绩是 {c}'
          // formatter: function(arg) {
          //   return arg[0].name + '<br/>数值:' + arg[0].data
          // }
        },
        xAxis: {
          data: [],
          axisLabel: {
            color: '#595959'
          }
        },
        yAxis: {
          boundaryGap: false,
          type: 'value'
        },
        series: [
          { data: [] }
        ]
      }
    }
  },

  watch: {
    config: {
      handler(newName, oldName) {
        this.render()
      },
      deep: true
    }
  },
  mounted() {
    this.echarts = this.$echarts.init(this.$refs.echarts)
    // this.render([{ data: [] }], [])
  },
  methods: {
    // 深层次合并两个对象
    $deepObjectMerge(firstObject, secondObject) {
      for (var key in secondObject) {
        firstObject[key] = firstObject[key] && Object.prototype.toString.call(firstObject[key]) === '[object Object]'
          ? this.$deepObjectMerge(firstObject[key], secondObject[key]) : secondObject[key]
      }
      return firstObject
    },
    render(data, xAxis) {
      if (data && data[0].data.length > 0) {
        this.isEmpty = false
      } else {
        this.isEmpty = true
      }
      this.option.series = data
      this.option.xAxis.data = xAxis

      this.echarts.setOption(this.$deepObjectMerge(this.option, this.config))
      this.$nextTick(() => {
        this.echarts.resize()
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.echarts,.eBox{
    width: 100%;
    height: 100%;
    min-height: 100px;
    min-width: 100px;
}
.el-empty{padding-top: 60px;}
</style>
